<template>
	<view class="content pages">
		<!-- 使用自定义导航栏组件 -->
		<navBar title="用户信息" bgColor="#156ed2" @getHeadHeight="getHeadHeight" :backIcon="true" path='/pages/my/my' />
		<view class="user-data align-center justify-between bg-primary">
			<image src="../../static/images/user-bg.png" class="user-bg" mode=""></image>
			<view v-if="!userInfo.username" class="user-info">
				<view class="flex align-center">
					<image class="avatar" src="../../static/images/default.png" mode=""></image>
					<text class="nousername border rounded-lg ml-2 text-white p-1" @click="login">立即登录</text>
				</view>
			</view>
			<view v-else class="user-info">
				<view class="flex align-center">
					<image class="avatar" src="../../static/images/avatar.jpg" mode=""></image>
					<text class="username">{{userInfo.username}}</text>
				</view>
			</view>
			<view class="user-card">
				<view class="bar flex pl-4">
					<u-icon slot="icon" size="35" color="#946309" name="integral-fill"></u-icon>
					<text class="ml-2 font-weight-bold">{{userInfo.coin ? userInfo.coin : 0}}</text>
				</view>
				<view class="card-info flex justify-between">
					<view class="name">{{userInfo.class.name ? userInfo.class.name :'登录体验更多功能'}}</view>
					<view class="phone">{{userInfo.phoneNumber ? userInfo.phoneNumber : ''}}</view>
				</view>
			</view>
		</view>
		<view class="list">
			<image class="arc" src="../../static/images/arc.png" mode=""></image>
			<view class="input-content">

				<view class="input-item">
					<text class="tit">原密码</text>
					<input type="password" v-model="form.oldPassword" placeholder="请输入您的姓名" />
				</view>
				<view class="input-item">
					<text class="tit">新密码</text>
					<input type="password" v-model="form.newPassword" placeholder="请输入您的姓名" />
				</view>
				<view class="input-item">
					<text class="tit">确认密码</text>
					<input type="password" v-model="form.rePassword" placeholder="请输入您的姓名" />
				</view>
				
				<button class="confirm-btn" :class="'bg-' + themeColor.name" :disabled="btnLoading"
					:loading="btnLoading" @tap="toUpdateInfo">
					提交
				</button>
			</view>
		</view>
		<BottomBar :selected='selected'></BottomBar>
	</view>
</template>

<script>
	import $G from '../../static/common/global.js';
	import $C from '../../static/common/config.js';
	import $H from '../../static/common/request.js';
	import {
		mapState
	} from 'vuex';
	export default {
		data() {
			return {
				form: {
					id: '',
					oldPassword: '',
					newPassword: '',
					rePassword: '',
				},

			}
		},
		computed: {
			...mapState({
				userInfo: state => state.user
			})
		},
		onShow() {
			this.$store.dispatch('getUserInfo');
			console.log(this.userInfo);
			this.form.id = this.userInfo.id
		},
		methods: {
			// 导航栏高度(单位px)
			getHeadHeight(e) {
				this.HeadNavHeight = e
				console.log(this.HeadNavHeight);
			},
			toUpdateInfo() {
				$H.post('/user/edit', this.form, {
					token: true
				}).then(res => {
					if (res.code == 200) {
						uni.showToast({
							title: '修改成功',
							icon: 'success',
							duration: 2000,
							mask: true
						});
						uni.removeStorageSync('token')
						uni.removeStorageSync('user')
						setTimeout(function() {
							uni.navigateTo({
								url: "/pages/login/login",
							})
						}, 2000);
					}
					console.log(res);
				});
			}
		}
	}
</script>

<style>
	.user-data {
		height: 520rpx;
		padding: 100rpx 30rpx 0;
		position: relative;
	}

	.user-bg {
		position: absolute;
		left: 0;
		top: 0;
		width: 100%;
		height: 60%;
		opacity: 0.84;
	}

	.avatar {
		width: 130rpx;
		height: 130rpx;
		border: 5rpx solid #fff;
		border-radius: 50%;
	}

	.username {
		font-size: 38rpx;
		color: #fff;
		margin-left: 20rpx;
	}

	.nousername {
		font-size: 22rpx;
		padding: 10rpx;
	}

	.user-info {
		height: 220rpx;
		display: flex;
		align-items: center;
		position: relative;
		z-index: 1;
		justify-content: space-between;
	}

	.user-card {
		display: flex;
		flex-direction: column;
		color: #f7d680;
		height: 240rpx;
		background: url('../../static/images/class_bg.png');
		background-size: 100% 100%;
		border-radius: 16rpx 16rpx 0 0;
		overflow: hidden;
		position: relative;
		padding: 20rpx 24rpx;
	}

	.bar {
		position: absolute;
		right: 24rpx;
		top: 24rpx;
		width: 160rpx;
		height: 40rpx;
		text-align: center;
		line-height: 40rpx;
		font-size: 22rpx;
		color: #946309;
		border-radius: 20px;
		background: linear-gradient(to left, #f9e6af, #ffd465);
		z-index: 1;
	}

	.card-info {
		width: 360rpx;
		font-size: 25rpx;
		color: #f7d680;
		margin-bottom: 28rpx;
		padding-left: 30px;
	}

	.list {
		transform: translateY(0px);
		transition: 0s;
		margin-top: -100rpx;
		padding: 0 30rpx 20rpx;
		position: relative;
		background-color: #f8f8f8;
		z-index: 1;
	}

	.arc {
		position: absolute;
		left: 0;
		top: -34rpx;
		width: 100%;
		height: 36rpx;

	}

	.list-item {
		background: #fff;
		margin-bottom: 20rpx;
	}

	.item-cell {
		display: flex;
		align-items: baseline;
		padding: 20rpx 30rpx;
		line-height: 60rpx;
		position: relative;
	}

	.list-cell {
		align-items: baseline;
		padding: 20rpx 30rpx;
		line-height: 60rpx;
		position: relative;
		background: #fff;
	}

	.badge-icon {
		position: absolute;
		top: 14rpx;
		right: 40rpx;
		width: 30rpx;
		height: 30rpx;
	}

	.grid-text {
		font-size: 28rpx;
		margin-top: 4rpx;
		color: $u-type-info;
	}

	.input-content {
		padding: 40upx 60upx;

	}

	.input-item {
		display: flex;
		padding: 0 30rpx;
		background: #eee;
		height: 80rpx;
		line-height: 80rpx;
		border-radius: 4px;
		margin-bottom: 30rpx;
	}

	.tit {
		width: 120upx;
		font-size: 26rpx;
		font-weight: bold;
		color: #333;
	}

	input {
		width: calc(100% - 100rpx);
		height: 80rpx;
		line-height: 80rpx;
		font-size: 24rpx;
		color: #999;
	}

	.date {
		height: 80rpx;
		line-height: 80rpx;
		font-size: 24rpx;
		color: #999;
	}

	.gender-item {
		margin-right: 20upx;

	}

	.gender-item-text {
		padding-left: 10upx;
	}

	radio-group {
		display: inline-block;
	}

	radio .wx-radio-input.wx-radio-input-checked {
		background: $uni-color-primary;
		border-color: $uni-color-primary;
	}

	radio::before,
	checkbox::before {
		font-family: "cuIcon";
		content: "\e645";
		position: absolute;
		color: #ffffff !important;
		top: 50%;
		margin-top: -8px;
		right: 5px;
		font-size: 32rpx;
		line-height: 16px;
		pointer-events: none;
		-webkit-transform: scale(1, 1);
		transform: scale(1, 1);
		transition: all 0.3s ease-in-out 0s;
		z-index: 9;
		transition-duration: 0.3s;
		transition-timing-function: ease-in-out;
		transition-delay: 0s;
		transition-property: all;
	}


	.confirm-btn {
		width: 630rpx;
		height: 76rpx;
		line-height: 76rpx;
		border-radius: 50px;
		margin-top: 70rpx;
		font-size: 32rpx;
		background-color: #0081ff;
		color: #fff;
	}
</style>